<template>
	<view class="box" :style="{background:'url(' +$BASE_URL+ piclist[0]+') no-repeat',backgroundSize:'100%'}">
		<view class="title">
			<image :src="$BASE_URL + piclist[1]" mode="aspectFill"></image>
		</view>
		<view class="card" v-if="checkstatus == null">
			<view class="" style="font-size: 35rpx;color: #3D3D3D;font-weight: 500;">
				店铺信息
			</view>
			<view class="item">
				<view class="label">
					联系人
				</view>
				<u-input v-model="shopInfo.name" :type="type" placeholder='请输入联系人姓名' />
			</view>
			<view class="item" style="display: block;padding-bottom: 20rpx;">
				<view class="" style="display: flex;align-items: center;">
					<view class="label">
						联系电话
					</view>
					<u-input v-model="shopInfo.phone" :type="number" maxlength='11' placeholder='请输入联系人电话' />
				</view>
				<view class="" style="display: flex;align-items: center;">
					<image :src="$BASE_URL + piclist[2]" mode="aspectFill" style="width: 30rpx;height: 30rpx;"></image>
					<text style="font-size: 20rpx;color: #999999;">登录账号默认手机号，短信通知您的入住审核结果。</text>
				</view>
			</view>
			<view class="item">
				<view class="label">
					店铺名称
				</view>
				<u-input v-model="shopInfo.shopName" :type="type" placeholder='请输入店铺名称' />
			</view>

			<view class="shopAvatar">
				<view class="">
					店铺头像
				</view>
				<view class="" style="margin-top: 20rpx;margin-bottom: 20rpx;">
					<image :src="$BASE_URL + piclist[3]" mode="aspectFill" style="width: 148rpx;height: 148rpx;"
						v-if="!shopInfo.shopAvatar" @click="selectPic(1)">
					</image>
					<image :src=" $BASE_URL+ shopInfo.shopAvatar" mode="aspectFill"
						style="width: 148rpx;height: 148rpx;" v-else @click="selectPic(1)">
					</image>
				</view>
				<view class="" style="display: flex;align-items: center;">
					<image :src="$BASE_URL + piclist[2]" mode="aspectFill" style="width: 30rpx;height: 30rpx;"></image>
					<text style="font-size: 20rpx;color: #999999;">小程序商铺展示使用，建议上传公司logo图片</text>
				</view>
			</view>
			<view class="invoice">
				<view class="" style="display: flex;justify-content: space-between;">
					<view class="">
						公司发票类型
					</view>
					<view class="" style="display: flex;" @click="popupShow = true">
						<text>{{shopInfo.invoice.length !=0 ?'已选择':'请选择'}}</text>
						<view class="u-iconfont uicon-arrow-right" style="color:#bfbfbf ;font-size: 28rpx;"></view>
					</view>
				</view>
				<view class="" style="display: flex;align-items: center;margin-top: 20rpx;">
					<image :src="$BASE_URL + piclist[2]" mode="aspectFill" style="width: 30rpx;height: 30rpx;"></image>
					<text style="font-size: 20rpx;color: #999999;">发票类型可多选</text>
				</view>

			</view>

		</view>
		<view class="box2" v-if="checkstatus == null">


			<view class="card">
				<view class="" style="font-size: 35rpx;color: #3D3D3D;font-weight: 500;">
					公司信息
				</view>
				<view class="item">
					<view class="label">
						公司名称
					</view>
					<u-input v-model="Company.CompanyName" :type="type" placeholder='请输入营业执照全称' />
				</view>
				<view class="item">
					<view class="label">
						工商注册号
					</view>
					<u-input v-model="Company.CompanyId" :type="type" placeholder='请输入工商注册号' />
				</view>
				<!-- 	<view class=""
					style="display: flex;justify-content: space-between;padding-bottom: 36rpx;border-bottom: 2rpx solid gainsboro;padding-top: 20rpx;">
					<view class="">
						公司所在地区
					</view>
					<view class="" style="display: flex;" @click="toshowSelect(1)">
						<text>{{Company.Location||'请选择'}}</text>
						<view class="u-iconfont uicon-arrow-right" style="color:#bfbfbf ;font-size: 28rpx;"></view>
					</view>
				</view> -->
				<view class=""
					style="display: flex;justify-content: space-between;padding-bottom: 36rpx;border-bottom: 2rpx solid gainsboro;margin: 20rpx 0;padding-top: 20rpx;">
					<view class="">
						当前经营位置
					</view>
					<view class="" style="display: flex;" @click="toshowSelect(2)">
						<text>{{Company.nowLocation||'请选择'}}</text>
						<view class="u-iconfont uicon-arrow-right" style="color:#bfbfbf ;font-size: 28rpx;"></view>
					</view>
				</view>
				<view class="item">
					<view class="label" style="width: 200rpx;">
						公司详细地址
					</view>
					<u-input v-model="Company.CompanyInfoAddress" :type="type" placeholder='请输入详细地址' />
				</view>
		<!-- 		<view class="item">
					<view class="label">
						户名

					</view>
					<u-input v-model="Company.AccountNo" :type="type" placeholder='请输入户名' />
				</view>
				<view class="item">
					<view class="label">

						税号

					</view>
					<u-input v-model="Company.paragraph" :type="type" placeholder='请输入税号' />
				</view>
				<view class="item">
					<view class="label">

						开户行

					</view>
					<u-input v-model="Company.Bank" :type="type" placeholder='请输入开户行' />
				</view>
				<view class="item">
					<view class="label">

						银行账号
					</view>
					<u-input v-model="Company.bankAccount" :type="number" placeholder='请输入银行账号' />
				</view>
 -->




				<view class="threePic">
					<view class="threePic-item">
						<image :src="$BASE_URL + piclist[3]" mode="aspectFill" style="width: 148rpx;height: 148rpx;"
							v-if="!Company.Businesslicense" @click="selectPic(2)">
						</image>
						<image :src=" $BASE_URL+ Company.Businesslicense" mode="aspectFill" v-else
							@click="selectPic(2)"></image>

						<text>营业执照图片</text>
					</view>
					<view class="threePic-item">
						<image :src="$BASE_URL + piclist[3]" mode="aspectFill" style="width: 148rpx;height: 148rpx;"
							v-if="!Company.officialSeal" @click="selectPic(3)">
						</image>
						<image :src=" $BASE_URL+ Company.officialSeal" mode="aspectFill" v-else @click="selectPic(3)">
						</image>
						<text>公章图片</text>
					</view>
					<view class="threePic-item">
						<image :src="$BASE_URL + piclist[3]" mode="aspectFill" style="width: 148rpx;height: 148rpx;"
							v-if="!Company.Doorhead" @click="selectPic(4)">
						</image>
						<image :src="$BASE_URL+ Company.Doorhead" mode="aspectFill"
							style="width: 148rpx;height: 148rpx;" v-else @click="selectPic(4)">
						</image>
						<text>公司门头照</text>
					</view>
				</view>


				<view class="cidbox">
					<view class="cidbox-item">
						<image :src="$BASE_URL + piclist[4]" mode="aspectFill" @click="selectPic(5)"
							v-if="!Company.cid"></image>
						<image :src="$BASE_URL+ Company.cid" mode="aspectFill" v-else @click="selectPic(5)"></image>
					</view>
					<view class="cidbox-item">

						<image :src="$BASE_URL + piclist[5]" mode="aspectFill" @click="selectPic(6)"
							v-if="!Company.backid"></image>
						<image :src="$BASE_URL+ Company.backid" mode="aspectFill" v-else @click="selectPic(6)"></image>


					</view>
				</view>
				<view class="" style="display: flex;align-items: center;margin-top: 20rpx;">
					<image :src="$BASE_URL + piclist[2]" mode="aspectFill" style="width: 30rpx;height: 30rpx;"></image>
					<text style="font-size: 20rpx;color: #999999;">请保证图片文字内容清晰</text>
				</view>
			</view>
		</view>
		<view class="card" style="text-align: center;" v-if="checkstatus != null">
			{{checkstatus == 0? '审核已提交，正在审核中...':checkstatus == 1?'审核失败':'审核通过'}}
		</view>

		<view class="foot" v-if="checkstatus == null">
		<!-- 	<view class="" style="display: flex;align-items: center;margin-bottom: 30rpx;margin-top: 20rpx;"
				@click="isRead = !isRead">
				<image :src="$BASE_URL + piclist[6]" mode="aspectFill"
					style="width: 30rpx;height: 30rpx;margin-left: 20rpx;" v-if="!isRead"></image>
				<image :src="$BASE_URL + piclist[7]" mode="aspectFill"
					style="width: 30rpx;height: 30rpx;margin-left: 20rpx;" v-else></image>
				<text style="font-size: 28rpx;">我已阅读并同意 <text style="color: #1E6FFF;">《商户合同服务协议》</text> 与 <text
						style="color: #1E6FFF;">《隐私协议》</text> </text>
			</view> -->
			<view class="btnok" @click="submit()">
				提交认证
			</view>
		</view>
		<u-popup v-model="popupShow" mode="bottom" >
			<view class="select-invoice">
				<u-checkbox-group @change="checkboxGroupChange" :wrap='true' size='40' active-color='#ff4747'>

					<view class="" v-for="(item, index) in list" :key="index"
						style="display: flex;justify-content: space-between;width: 100%;margin-bottom: 20rpx;">
						{{item.name}}
						<u-checkbox size='40' @change="checkboxChange" v-model="item.checked" :name="item.name">
						</u-checkbox>
					</view>







				</u-checkbox-group>
			</view>
		</u-popup>



		<!-- 省市区选择器 -->
		<u-select mode="mutil-column-auto" safe-area-inset-bottom :list="addressAreaList" v-model="showSelect"
			@confirm="regionConfirm"></u-select>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
						name: '普通发票',
						checked: false,
						disabled: false
					},
					{
						name: '增值税发票',
						checked: false,
						disabled: false
					}
				],
				popupShow: false,
				showSelect: false,
				piclist: [],
				isRead: false,
				shopInfo: { //店铺信息
					name: '', // 联系人
					phone: '', // 联系人手机号
					shopName: '', //店铺名称
					shopAvatar: '', //店铺头像
					invoice: []
				},
				Company: {
					Businesslicense: "", // 营业执照
					officialSeal: '', // 公章
					Doorhead: '', // 公司门头照 
					cid: '', // 身份证正面照
					backid: '', // 身份证背面照片
					CompanyName: '', // 公司名称
					CompanyId: '', // 工商注册号
					CompanyInfoAddress: '', // 公司详细地址
					Location: "", //公司所在地
					nowLocation: "", // 当前经营位置
					AccountNo: '', // 户号
					paragraph: '', //税号
					Bank: '', // 开户行
					bankAccount: '', // 银行账户
					province: '',
					city: "",
					area: ''
				},
				area_text: '',
				addressAreaList: [], //区域列表
				n: '',
				Identification: {}, //身份证信息
				IdentificationBack: {},
				Businesslicense: {} ,// 营业执照信息
				checkstatus:null  // 0表示正在审核  1 是未审核
			}
		},
		onLoad() {
			
			this.checkStatus()
			this.getArea()
		},
		mounted() {
			this.getPic()
			
			// this.Businesslicense = uni.getStorageSync('Businesslicense')
			// this.Identification = uni.getStorageSync('Identification').result
			// this.IdentificationBack = uni.getStorageSync('IdentificationBack').result
		},
		methods: {
			// 查询当前状态
			checkStatus(){
				this.$http('user.initialization').then(res=>{
					if(res.code == 1){
						console.log(res);
						if(res.data.item == null) {
							this.checkstatus  = null
						}else {
							this.checkstatus =	res.data.item.status
						}
						
					}
				})
			},
			
			
			msg(str){
				uni.showToast({
					title:str,
					icon:"none"
				})
			},
			// 提交
			submit() {

				if(this.shopInfo.name == '') return this.msg('请填写联系人')
				if(this.shopInfo.phone == '') return this.msg('请填写联系电话')
				if(this.shopInfo.shopName == '') return this.msg('请填写店铺名称')
				if(this.shopInfo.shopAvatar == '') return this.msg('请上传店铺头像')
				if(this.Company.CompanyName == '') return this.msg('请填写公司名称')
				if(this.Company.CompanyId == '') return this.msg('请填写工商注册号')
				if(this.Company.nowLocation == '') return this.msg('请填写当前经营位置')
				if(this.Company.CompanyInfoAddress == '') return this.msg('请填写公司详细地址')
				if(this.Company.Businesslicense == '') return this.msg('请上传营业执照')
				if(this.Company.officialSeal == '') return this.msg('请上传公章照')
				if(this.Company.Doorhead == '') return this.msg('请上传公司门头照')
				if(this.Company.cid == '') return this.msg('请上传身份证正面照')
				if(this.Company.backid == '') return this.msg('请上传身份证背面照')
				if(this.isRead == false) return this.msg('请阅读并同意相关协议')
				


				this.$http('user.storeCreate', {
					identity: {
						identity_just_image:this.Company.cid,
						identity_back_image:this.Company.backid,
						identity_name:this.Identification.name,
						identity_number:this.Identification.idcardno,
						identity_address:this.Identification.address,
						identity_sex:this.Identification.sex,
						identity_birth:this.Identification.birth,
						identity_start_date:this.IdentificationBack.start_date,
						identity_end_date:this.IdentificationBack.end_date,
						identity_issue:this.IdentificationBack.issue,
					},
					business: {
						...this.Businesslicense,
						businessLicenseimage:this.Company.Businesslicense,
						province_name:this.Company.province,
						area_name:this.Company.area,
						city_name:this.Company.city,
						address:this.Company.CompanyInfoAddress,
						doorway_image:this.Doorhead,
						seal_image:this.Company.officialSeal,
						mobile:this.shopInfo.phone,
						name:this.shopInfo.shopName,
						image:this.shopInfo.shopAvatar,
						invoice_type:this.shopInfo.invoice.join(',')
					}
				}).then(res=>{
					console.log(res);
					if(re.code == 1) {
						uni.showToast({
							title:res.msg,
							icon:"none"
						})
						this.checkStatus()
					}
				})

			},

			// 选中某个复选框时，由checkbox时触发
			checkboxChange(e) {
				console.log(e);
			},
			// 选中任一checkbox时，由checkbox-group触发
			checkboxGroupChange(e) {
				console.log(e);
				this.shopInfo.invoice = e
			},

			// 确认城市
			regionConfirm(e) {

				if (this.n == 1) {
					this.Company.Location = `${e[0].label}-${e[1].label}-${e[2].label}`;
				} else {
					this.Company.nowLocation = `${e[0].label}-${e[1].label}-${e[2].label}`;
					this.Company.province = e[0].label
					this.Company.city = e[1].label
					this.Company.area = e[2].label


				}
			},

			toshowSelect(n) {
				this.showSelect = true
				this.n = n
			},
			// 获取省市区
			getArea() {
				this.$http('address.area').then(res => {
					if (res.code === 1) {
						let {
							provinceData,
							cityData,
							areaData
						} = res.data;
						provinceData.forEach((item, index) => {
							this.addressAreaList.push({
								...item,
								children: []
							});
							this.addressAreaList[index].children.push(...cityData[index]);
							this.addressAreaList[index].children.forEach((item1, index1) => {
								item1['children'] = [];
								item1.children.push(...areaData[index][index1]);
							});
						});
					}
				});
			},
			// 选择头像
			selectPic(num) {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: (res) => {
						uni.uploadFile({
							url: 'https://zuji.jiusuding.cn/api/common/upload', //仅为示例，非真实的接口地址
							filePath: res.tempFilePaths[0],
							fileType: 'image',
							name: 'file',
							header: {
								"Content-Type": "multipart/form-data",
								"token": uni.getStorageSync('token') || ''
							},
							success: (uploadFileRes) => {
								console.log(JSON.parse(uploadFileRes.data).data.url);
								if (num == 1) {
									this.shopInfo.shopAvatar = JSON.parse(uploadFileRes.data).data
										.url
								} else if (num == 2) {
									this.Company.Businesslicense = JSON.parse(uploadFileRes.data)
										.data.url

									this.$http('user.businessLicense', {
										image: this.Company.Businesslicense
									}).then(res => {
										console.log(res);
										if (res.code == 1) {
											this.Businesslicense = res.data.result
											this.Company.CompanyName = res.data.result.businessLicenseName
											this.Company.CompanyId = res.data.result.businessLicenseCode
											this.Company.CompanyInfoAddress = res.data.result.businessLicenseAddr
											// uni.setStorageSync('Businesslicense',res.data.result)
											
										} else {
											uni.showToast({
												title: "上传出错，请重新上传图片",
												icon: "error"
											})
										}
									})


								} else if (num == 3) {
									this.Company.officialSeal = JSON.parse(uploadFileRes.data).data
										.url
								} else if (num == 4) {
									this.Company.Doorhead = JSON.parse(uploadFileRes.data).data.url
								} else if (num == 5) {
									this.Company.cid = JSON.parse(uploadFileRes.data).data.url


									this.$http('user.identityVerify', {
										type: 1,
										image: this.Company.cid
									}).then(res => {
										console.log(res);
										if (res.code == 1) {
											this.Identification = res.data.result.result
										// uni.setStorageSync('Identification',res.data.result)
										}
									})

								} else if (num == 6) {
									this.Company.backid = JSON.parse(uploadFileRes.data).data.url



									this.$http('user.identityVerify', {
										type: 2,
										image: this.Company.backid
									}).then(res => {
										console.log(res);
										if (res.code == 1) {
											this.IdentificationBack = res.data.result
												.result
											// uni.setStorageSync('IdentificationBack',res.data.result)
										}
									})
								}


							}
						});
					}
				});


			},
			getPic() {
				this.$http('common.getPic', {}).then(res => {
					if (res.code === 1) {
						this.piclist = res.data.result.shopInIcon
					}
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.box {
		padding-bottom: 192rpx;
		padding-top: 30rpx;
		min-height: 100vh;

		.select-invoice {
			height: 300rpx;
			padding: 30rpx;
			box-sizing: border-box;

			/deep/ .u-checkbox {
				width: 40rpx !important;
				justify-content: space-between;

			}

		}

		.box2 {
			background-color: #f4f6f4;
			padding-bottom: 20rpx;
		}

		.foot {
			position: fixed;
			bottom: 0;
			width: 100%;
			height: 192rpx;
			background-color: #fff;

			.btnok {
				width: 680rpx;
				height: 88rpx;
				color: #fff;
				text-align: center;
				line-height: 88rpx;
				border-radius: 44rpx;
				margin: 0 auto;
				background-color: #FF4747;
			}
		}

		.card {
			width: 710rpx;
			background-color: #fff;
			padding: 40rpx 30rpx;
			box-sizing: border-box;
			margin: 0 auto;
			border-radius: 20rpx;
			margin-bottom: 30rpx;

			.item {
				display: flex;
				align-items: center;
				border-bottom: 2rpx solid gainsboro;
				margin-bottom: 25rpx;
				padding-bottom: 20rpx;

				.label {
					width: 160rpx;
				}

				/deep/ .u-input {
					text-align: right !important;
				}

			}

			.shopAvatar {
				border-bottom: 2rpx solid gainsboro;
				padding-bottom: 20rpx;
			}

			.invoice {
				padding: 20rpx 0;
				// border-bottom: 2rpx solid gainsboro;
			}

			.threePic {
				display: flex;
				justify-content: space-between;

				.threePic-item {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;

					image {
						margin-bottom: 20rpx;
						width: 148rpx;
						height: 148rpx;
					}

				}
			}


			.cidbox {
				display: flex;
				justify-content: space-between;
				margin: 35rpx 0;

				.cidbox-item {
					position: relative;
					width: 312rpx;
					height: 200rpx;
					// background-color: #FC6256;
					border-radius: 15rpx;
					overflow: hidden;

					image {
						width: 312rpx;
						height: 200rpx;
					}
				}
			}

		}

		.title {
			margin: 0 auto;
			width: 586rpx;
			height: 400rpx;


			image {
				width: 586rpx;
				height: 400rpx;
			}
		}
	}
</style>
